<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
    #main{background: url(./images/bg.jpg) no-repeat center 0;height: 1780px;}
    #nav{background: url(./images/nav_down_re.png) repeat-x,url(./images/nav.png) no-repeat center 0;}

    #nav .container{position: relative;overflow: hidden;min-height: 236px;}
    #nav .nav_logo{width: 138px;height: 112px;margin: 15px auto;}

    #nav dl{position: absolute;top: 0;}
    #nav dt{height: 66px;text-indent: -9999px;}
    #nav dt a{width: 100%;height: 100%;display: block;text-indent: -9999px;overflow: hidden;}
    #nav dd{line-height: 27px;font-size: 12px;text-align: center;}
    #nav dd a{color: white;position: relative;}
    #nav dd a.new::after{content: "";display: block;width: 12px;height: 12px;background: url(./images/nav_tips.png) no-repeat 0 0;position: absolute;right: -15px;top: 2px;}
    #nav dd a.hot::after{content: "";display: block;width: 12px;height: 12px;background: url(./images/nav_tips.png) no-repeat 0 -12px;position: absolute;right: -15px;top: 2px;}
    #nav dd a:hover{color: red;text-decoration: underline;}
    #nav .nav_index{width: 65px;left: 20px;}
    #nav .nav_zl{width: 69px;left: 98px;}
    #nav .nav_sszx{width: 74px;left: 203px;}
    #nav .nav_hdzx{width: 68px;left: 325px;}
    #nav .nav_zq{width: 68px;left: 567px;}
    #nav .nav_zb{width: 68px;left: 685px;}
    #nav .nav_hd{width: 68px;left: 800px;}
    #nav .nav_kf{width: 78px;left: 890px;}

    #link{height: 175px;}
    #link a{width: 580px;height: 100%;display: block;margin: 0 auto;}

    #banner{height: 276px; background: url(./images/top.png) no-repeat;margin-top: 20px;}
    #banner .banner_left{width: 240px;background: url(./images/down_user_spr.png) no-repeat;height: 310px;margin: -20px 0 0 7px;}
    #banner .banner_download p{width: 91px;height: 25px;background:url(./images/down_user_spr.png) no-repeat;margin:0 auto;text-indent: -9999px;overflow: hidden; }
    #banner .banner_download p:first-child{background-position: -253px 0;margin-top: 44px;}
    #banner .banner_download p:last-child{background-position: -253px -25px;}

    /*CSS3简单的动画*/
    #banner .banner_download:hover p:first-child{animation: 1s upMove;}
    @keyframes upMove{
        0%{transform: translateY(-40px);opacity: 0;}
        100%{transform: translateY(0);opacity: 1;}
            }

    #banner .banner_download:hover p:last-child{animation: 1s downMove;}
    @keyframes downMove{
        0%{transform: translateY(40px);opacity: 0;}
        100%{transform: translateY(0);opacity: 1;}
            }
    /*CSS3简单的动画*/
    #banner .banner_user{}
    #banner .banner_user img{border-radius: 50%;margin: 80px auto 0 auto;border: solid 2px #283257;}
    #banner .banner_user p{font-size: 12px;text-align: center;color: white;margin-top: 20px;}
    #banner .banner_user a{color: #34f1d0;}

    #banner .banner_list{width: 497px;height: 253px;overflow: hidden;margin: 14px 0 0 4px;position: relative;}
    #banner .banner_list_ul{width: 8000px;}
    #banner .banner_list_ul li{width: 497px;height: 253px;float: left;}

    #banner .banner_bottomline{ height: 37px;width: 100%; background: rgba(0,0,0,0.5);border-top:#514b55 solid 1px;position:absolute;bottom: 0;left: 0;}
    #banner .banner_bottomline_ul{text-align: center;margin-top: 11px;}
    #banner .banner_bottomline_ul li{display:inline-block;width: 15px;height: 15px;background: url(./images/top.png) no-repeat -603px -299px;}
    #banner .banner_bottomline_ul li.active{background-position: -581px -299px;cursor: pointer;}

    #banner .banner_bottomline_leftbtn{width: 12px;height: 22px; background: url(./images/top.png) no-repeat -542px -296px;position: absolute;left: 5px;top: 10px;cursor: pointer;}
    #banner .banner_bottomline_rightbtn{width: 12px;height: 22px; background: url(./images/top.png) no-repeat -554px -296px;position: absolute;right: 5px;top: 10px;cursor: pointer;}

    #banner .banner_bottomline_leftbtn:hover{background-position: -542px -325px;}
    #banner .banner_bottomline_rightbtn:hover{background-position: -554px -325px;}

    #banner .banner_list_lt{width: 12px;height: 12px; left:-4px;top: -4px;background: url(./images/top.png) no-repeat -621px -299px;position: absolute;}
    #banner .banner_list_lb{width: 12px;height: 12px; left:-3px;bottom: -4px;background: url(./images/top.png) no-repeat -621px -312px;position: absolute;}
    #banner .banner_list_rt{width: 12px;height: 12px; right:-3px;top: -3px;background: url(./images/top.png) no-repeat -634px -299px;position: absolute;}
    #banner .banner_list_rb{width: 12px;height: 12px; right:-4px;bottom: -3px;background: url(./images/top.png) no-repeat -634px -312px;position: absolute;}
    </style>
</head>
<body>
    <div id="head" class="container-fluid">
        <div class="container">
            <div class="head_logo l">
                <a href="#" title="腾讯游戏">腾讯游戏</a>
            </div>
            <div class="head_ad l">
                <a href="#">
                    <img src="./images/ad.jpg" alt="">
                </a>
            </div>
            <div class="head_menu r">
                <a href="#">
                    <div class="head_menu_czsh l">
                    成长守护平台
                    </div>
                </a>
                <a href="#">
                    <div class="head_menu_top l">
                    腾讯游戏排行榜
                    <i class="head_menu_btn"></i>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div id="main" class="contaier-fluid">
        <div id="nav" class="container-fluid">
            <div class="container">
                <div class="nav_logo">
                    <a href="#">
                        <img src="./images/logo.png" alt="QQ飞车" title="QQ飞车">
                    </a>
                </div>
                <dl class="nav_index">
                    <dt>
                        <a href="#">首页</a>
                    </dt>
                </dl>
                <dl class="nav_zl">
                    <dt>游戏资料</dt>
                    <dd><a href="#">新手福利</a></dd>
                    <dd><a class="hot" href="#">官方漫画</a></dd>
                    <dd><a class="new" href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
                <dl class="nav_sszx">
                    <dt>赛事中心</dt>
                    <dd><a class="hot"  href="#">SSC</a></dd>
                    <dd><a href="#">谁是车王</a></dd>
                    <dd><a href="#">全民争霸赛</a></dd>
                </dl>
                <dl class="nav_hdzx">
                    <dt>活动中心</dt>
                    <dd><a class="hot"  href="#">版本专区</a></dd>
                    <dd><a href="#">合作专区</a></dd>
                    <dd><a href="#">CDK兑换</a></dd>
                </dl>
                <dl class="nav_zq">
                    <dt>商城专区</dt>
                    <dd><a href="#">紫钻专区</a></dd>
                    <dd><a href="#">道聚城</a></dd>
                    <dd><a href="#">点券充值</a></dd>
                </dl>
                <dl class="nav_zb">
                    <dt>视频直播</dt>
                    <dd><a href="#">教学视频</a></dd>
                    <dd><a href="#">视频中心</a></dd>
                </dl>
                <dl class="nav_hd">
                    <dt>玩家互动</dt>
                    <dd><a href="#">官方论坛</a></dd>
                    <dd><a class="hot"  href="#">掌上飞车</a></dd>
                    <dd><a href="#">兴趣部落</a></dd>
                    <dd><a href="#">官方微信</a></dd>
                    <dd><a href="#">官方微博</a></dd>
                </dl>
                <dl class="nav_kf">
                        <dt>客服</dt>
                        <dd><a href="#">客服中心</a></dd>
                        <dd><a class="new"  href="#">安全信用体系</a></dd>
                        <dd><a href="#">封号查询</a></dd>
                        <dd><a href="#">游戏安全评测</a></dd>
                        <dd><a class="new"  href="#">道具删除找回</a></dd>
                    </dl>
            </div>
        </div>
        <div id="link" class="container">
            <a href="#"></a>
        </div>
        <div id="banner" class="container">
            <div class="banner_left l">
                <div class="banner_download">
                    <p>下载游戏</p>
                    <p>DOWNLOAD</p>
                </div>
                <div class="banner_user">
                    <img src="./images/56x56.jpg" alt="">
                    <p>欢迎<a href="#">登录</a>。进入飞车世界</p>
                </div>
            </div>
            <div class="banner_center l">
                <div class="banner_list">
                    <ul class="banner_list_ul">
                        <li>
                            <a href="#">
                                <img src="./images/p1.jpeg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/p2.jpeg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/p3.jpeg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/p4.jpeg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/p5.jpeg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/p6.jpeg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/p7.jpeg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/p8.jpeg" alt="">
                            </a>
                        </li>
                    </ul>
                    <div class="banner_bottomline">
                        <ul class="banner_bottomline_ul">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <div class="banner_bottomline_leftbtn"></div>
                        <div class="banner_bottomline_rightbtn"></div>
                    </div>

                    <i class="banner_list_lt"></i>
                    <i class="banner_list_rt"></i>
                    <i class="banner_list_lb"></i>
                    <i class="banner_list_rb"></i>

                </div>                
            </div>
            <div class="banner_right l"></div>
        </div>
    </div>
</body>
</html>